<template>
    <div class="components_detail_modal">
        <el-dialog width="1000px" :title="title" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
            <div>
                <table style="width:100%">
                    <tbody>
                        <!-- <tr>
                            <td width="110px;">用户名：</td>
                            <td>{{userInfo.login}}</td>
                            <td width="110px;">姓名:</td>
                            <td>{{userInfo.lastName}}</td>
                            <td width="110px;">昵称：</td>
                            <td>{{userInfo.userProfile.nickname}}</td>
                        </tr>
                        <tr>
                            <td>生日：</td>
                            <td>{{userInfo.userProfile.birthday}}</td>
                            <td>性别：</td>
                            <td>{{userInfo.userProfile.sex}}</td>
                            <td>管理员：</td>
                            <td>{{userInfo.userProfile.isSuperuser}}</td>
                        </tr>
                        <tr>
                            <td>连续签到天数：</td>
                            <td>{{userInfo.userProfile.signDays}} 天</td>
                            <td>抽奖次数：</td>
                            <td>{{userInfo.userProfile.lotteryCount}} 次</td>
                            <td>预留姓名：</td>
                            <td>{{userInfo.userProfile.drawName}}</td>
                        </tr>
                        <tr>
                            <td>预留生日：</td>
                            <td>{{userInfo.userProfile.drawBirthday}}</td>
                            <td>预留手机号：</td>
                            <td colspan="3">{{userInfo.userProfile.drawPhone}}</td>
                        </tr>
                        <tr>
                            <td>封面图片：</td>
                            <td colspan="5"><img :src="userInfo.userProfile.avatarUrl" style="width:200px;"></td>
                        </tr>
                        <tr>
                            <td>个性签名：</td>
                            <td colspan="5">{{userInfo.userProfile.slogan}}</td>
                        </tr>
                        <tr>
                            <td>地址：</td>
                            <td colspan="5">{{userInfo.userProfile.address}}</td>
                        </tr> -->
                    </tbody>
                </table>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="small">确 定</el-button>
                <el-button @click="state = false" size="small">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        enums
    } from '@/constant'
    import PlUpload from "../../../common/PlUpload"
    export default {
        components: {
            "pl-upload": PlUpload
        },
        data() {
            return {
                state: false,
                title: '',
                type: '',
                imageUrl: '',
                attachment: [], //上传附件
                userInfo: {
                    login: null,
                    lastName: null,
                    nickname: null,
                    birthday: null,
                    sex: null,
                    slogan: null,
                    address: null,
                    isSuperuser: null,
                    avatarUrl: null,
                    signDays: null,
                    lotteryCount: null,
                    drawName: null,
                    drawBirthday: null,
                    drawPhone: null
                },
                rules: {
                    type: [{
                        required: true,
                        message: '请输入字典类型',
                        trigger: 'blur'
                    }],
                    dictValue: [{
                        required: true,
                        message: '请输入字典名称',
                        trigger: 'blur'
                    }],
                    description: [
                        // { required: true, message: '请输入字典描述', trigger: 'blur'}
                    ],
                    dictKey: [{
                        required: true,
                        message: '请输入字典值',
                        trigger: 'blur'
                    }]
                },
            }
        },
        created() {
        },
        mounted() {},
        methods: {
            showDialog(val) {
                if (this.$refs['userInfo'] !== undefined) {
                    this.$refs['userInfo'].resetFields();
                }
                if (val) {
                    console.log("val");
                    console.log(val);
                    this.userInfo = val;
                    // for(var key in val){
                    //    this.userInfo[key] = val.userProfile[key];
                    // }
                    this.title = "编辑用户";
                    this.type = "edit";
                } else {
                    this.title = "添加用户";
                    this.type = "add";
                }
                this.state = true;
            },
            handleAvatarSuccess(res, file) {
                console.log("res, file");
                console.log(res, file);
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            adduserInfo() {
                let vm = this;
                vm.$refs.userInfo.validate((valid) => {
                    if (valid) {
                        let submission = ''; //提交方式
                        //选择提交方式
                        if (type == 'edit') {
                            submission = 'put';
                        } else {
                            submission = 'post';
                        }
                        // 提交
                        this.axios({
                            method: submission,
                            url: api.userInfo.dictHandle,
                            data: vm.userInfo
                        }).then((response) => {
                            if (response.data.code == 200) {
                                vm.state = false;
                                vm.$parent.$refs.userInfoTable.$emit('vuetable:refresh');
                                vm.$message.success(response.data.message);
                            } else {
                                vm.$message.error(response.data.message);
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            reloadFiles: function(files) {
                let vm = this;
                this.attachment = [];
                files.forEach((item, idnex) => {
                    let model = {
                        fileRealName: item.fileRealName,
                        objectKey: item.object
                    }
                    this.attachment.push(model)
                })
                console.log("this.attachment");
                console.log(this.attachment);
            },
        },
    };
</script>
<style scoped>
    /* .el-form--inline .el-form-item__content{ width: 220px; } */
</style>